<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>可信电子凭证查询平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            --primary-color: #1a73e8;
            --primary-dark: #0d47a1;
            --secondary-color: #f8f9fa;
            --text-color: #202124;
            --light-gray: #f1f3f4;
            --border-color: #dadce0;
            --success-color: #34a853;
            --warning-color: #f9ab00;
            --danger-color: #ea4335;
            --sidebar-width: 260px;
            --sidebar-collapsed-width: 60px;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: #f8f9fa;
            color: var(--text-color);
            line-height: 1.6;
            display: flex;
        }
        
        .container {
            display: flex;
            width: 100%;
        }
        
        /* 侧边栏样式 */
        .sidebar {
            width: var(--sidebar-width);
            background-color: white;
            box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
            height: 100vh;
            position: fixed;
            left: 0;
            top: 0;
            transition: width 0.3s;
            overflow-y: auto;
            z-index: 100;
        }
        
        .sidebar.collapsed {
            width: var(--sidebar-collapsed-width);
        }
        
        .sidebar-header {
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .sidebar-header i {
            font-size: 24px;
            color: var(--primary-color);
        }
        
        .sidebar-header h1 {
            font-size: 18px;
            font-weight: 600;
            white-space: nowrap;
        }
        
        .sidebar.collapsed .sidebar-header h1 {
            display: none;
        }
        
        .sidebar-menu {
            padding: 15px 0;
        }
        
        .menu-item {
            padding: 12px 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: all 0.3s;
            color: var(--text-color);
            text-decoration: none;
        }
        
        .menu-item:hover {
            background-color: var(--light-gray);
            color: var(--primary-color);
        }
        
        .menu-item.active {
            background-color: #e8f0fe;
            color: var(--primary-color);
            border-right: 3px solid var(--primary-color);
        }
        
        .menu-item i {
            width: 20px;
            text-align: center;
        }
        
        .menu-text {
            white-space: nowrap;
        }
        
        .sidebar.collapsed .menu-text {
            display: none;
        }
        
        .submenu {
            padding-left: 40px;
            display: none;
        }
        
        .submenu.active {
            display: block;
        }
        
        .submenu-item {
            padding: 10px 20px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 12px;
            transition: all 0.3s;
            color: var(--text-color);
            text-decoration: none;
            font-size: 14px;
        }
        
        .submenu-item:hover {
            background-color: var(--light-gray);
            color: var(--primary-color);
        }
        
        .submenu-item.active {
            background-color: #e8f0fe;
            color: var(--primary-color);
        }
        
        .sidebar.collapsed .submenu {
            display: none !important;
        }
        
        .toggle-sidebar {
            position: absolute;
            bottom: 20px;
            left: 20px;
            background: none;
            border: none;
            cursor: pointer;
            color: #5f6368;
        }
        
        .sidebar.collapsed .toggle-sidebar {
            left: 20px;
        }
        
        /* 主内容区域 */
        .main-content {
            flex: 1;
            margin-left: var(--sidebar-width);
            transition: margin-left 0.3s;
        }
        
        .main-content.expanded {
            margin-left: var(--sidebar-collapsed-width);
        }
        
        /* 头部样式 */
        header {
            background-color: white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 99;
        }
        
        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 30px;
        }
        
        .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background-color: var(--primary-color);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
        }
        
        /* 主要内容区域 */
        main {
            padding: 30px;
            min-height: calc(100vh - 140px);
        }
        
        .page-header {
            margin-bottom: 30px;
        }
        
        .page-header h2 {
            font-size: 24px;
            margin-bottom: 10px;
        }
        
        .page-header p {
            color: #5f6368;
        }
        
        /* 卡片样式 */
        .card {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            padding: 24px;
            margin-bottom: 24px;
        }
        
        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 1px solid var(--border-color);
        }
        
        .card-title {
            font-size: 18px;
            font-weight: 600;
        }
        
        /* 按钮样式 */
        .btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 10px 20px;
            border-radius: 4px;
            border: none;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            text-decoration: none;
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            color: white;
        }
        
        .btn-primary:hover {
            background-color: var(--primary-dark);
        }
        
        .btn-outline {
            background-color: transparent;
            border: 1px solid var(--border-color);
            color: var(--text-color);
        }
        
        .btn-outline:hover {
            background-color: var(--light-gray);
        }
        
        .btn-success {
            background-color: var(--success-color);
            color: white;
        }
        
        .btn-danger {
            background-color: var(--danger-color);
            color: white;
        }
        
        .btn-sm {
            padding: 6px 12px;
            font-size: 14px;
        }
        
        /* 表单样式 */
        .form-group {
            margin-bottom: 20px;
        }
        
        .form-label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
        }
        
        .form-control {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            font-size: 16px;
            transition: border 0.3s;
        }
        
        .form-control:focus {
            outline: none;
            border-color: var(--primary-color);
        }
        
        /* 网格布局 */
        .row {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -12px;
        }
        
        .col {
            flex: 1;
            padding: 0 12px;
        }
        
        .col-2 {
            flex: 0 0 50%;
            padding: 0 12px;
        }
        
        .col-3 {
            flex: 0 0 33.333%;
            padding: 0 12px;
        }
        
        /* 统计卡片 */
        .stats-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .stat-card {
            background-color: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }
        
        .stat-value {
            font-size: 28px;
            font-weight: 600;
            margin-bottom: 5px;
        }
        
        .stat-label {
            color: #5f6368;
            font-size: 14px;
        }
        
        /* 表格样式 */
        .table {
            width: 100%;
            border-collapse: collapse;
        }
        
        .table th, .table td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }
        
        .table th {
            font-weight: 600;
            color: #5f6368;
            background-color: var(--light-gray);
        }
        
        .table tr:hover {
            background-color: #f8f9fa;
        }
        
        .status-badge {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .status-valid {
            background-color: #e6f4ea;
            color: var(--success-color);
        }
        
        .status-invalid {
            background-color: #fce8e6;
            color: var(--danger-color);
        }
        
        /* 页脚样式 */
        footer {
            background-color: white;
            border-top: 1px solid var(--border-color);
            padding: 20px 30px;
            text-align: center;
            color: #5f6368;
            font-size: 14px;
        }
        
        /* 验证码输入区域 */
        .verification-area {
            display: flex;
            gap: 15px;
            align-items: flex-end;
        }
        
        .verification-input {
            flex: 1;
        }
        
        /* 标签页样式 */
        .tabs {
            display: flex;
            border-bottom: 1px solid var(--border-color);
            margin-bottom: 20px;
        }
        
        .tab {
            padding: 12px 24px;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            transition: all 0.3s;
        }
        
        .tab.active {
            border-bottom-color: var(--primary-color);
            color: var(--primary-color);
            font-weight: 500;
        }
        
        .tab-content {
            display: none;
        }
        
        .tab-content.active {
            display: block;
        }
        
        /* 文件上传区域 */
        .file-upload-area {
            border: 2px dashed var(--border-color);
            border-radius: 8px;
            padding: 40px 20px;
            text-align: center;
            margin-bottom: 20px;
            transition: all 0.3s;
        }
        
        .file-upload-area:hover {
            border-color: var(--primary-color);
        }
        
        .file-upload-area i {
            font-size: 48px;
            color: var(--primary-color);
            margin-bottom: 15px;
        }
        
        /* 进度条样式 */
        .progress-bar {
            height: 8px;
            background-color: var(--light-gray);
            border-radius: 4px;
            overflow: hidden;
            margin: 15px 0;
        }
        
        .progress {
            height: 100%;
            background-color: var(--primary-color);
            width: 0%;
            transition: width 0.5s;
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .sidebar {
                width: var(--sidebar-collapsed-width);
            }
            
            .sidebar .menu-text,
            .sidebar .sidebar-header h1 {
                display: none;
            }
            
            .main-content {
                margin-left: var(--sidebar-collapsed-width);
            }
            
            .col, .col-2, .col-3 {
                flex: 0 0 100%;
                margin-bottom: 20px;
            }
            
            .stats-container {
                grid-template-columns: 1fr;
            }
            
            .tabs {
                flex-wrap: wrap;
            }
            
            .tab {
                flex: 1;
                text-align: center;
            }
        }
        
        .text-muted {
            color: #5f6368;
        }
        
        .page-content {
            display: none;
        }
        
        .page-content.active {
            display: block;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 侧边栏菜单 -->
        <div class="sidebar">
            <div class="sidebar-header">
                <i class="fas fa-shield-alt"></i>
                <h1>可信电子凭证查询平台</h1>
            </div>
            
            <div class="sidebar-menu">
                <a href="#" class="menu-item active" data-page="index">
                    <i class="fas fa-home"></i>
                    <span class="menu-text">首页</span>
                </a>
                
                <a href="#" class="menu-item" data-page="single-query">
                    <i class="fas fa-search"></i>
                    <span class="menu-text">单凭证查询</span>
                </a>
                <div class="submenu">
                    <a href="#" class="submenu-item active" data-page="single-basic">基础查询</a>
                    <a href="#" class="submenu-item" data-page="single-advanced">高级查询</a>
                    <a href="#" class="submenu-item" data-page="single-history">查询历史</a>
                </div>
                
                <a href="#" class="menu-item" data-page="batch-query">
                    <i class="fas fa-tasks"></i>
                    <span class="menu-text">批量查询</span>
                </a>
                <div class="submenu">
                    <a href="#" class="submenu-item active" data-page="batch-upload">文件上传查询</a>
                    <a href="#" class="submenu-item" data-page="batch-filter">条件筛选查询</a>
                    <a href="#" class="submenu-item" data-page="batch-tasks">批量任务管理</a>
                </div>
                
                <a href="#" class="menu-item" data-page="query-results">
                    <i class="fas fa-list-alt"></i>
                    <span class="menu-text">查询结果</span>
                </a>
                <div class="submenu">
                    <a href="#" class="submenu-item active" data-page="results-list">结果列表</a>
                    <a href="#" class="submenu-item" data-page="results-export">结果导出</a>
                    <a href="#" class="submenu-item" data-page="results-reports">查验报告</a>
                </div>
                
                <a href="#" class="menu-item" data-page="admin">
                    <i class="fas fa-cog"></i>
                    <span class="menu-text">系统管理</span>
                </a>
                <div class="submenu">
                    <a href="#" class="submenu-item active" data-page="admin-users">用户管理</a>
                    <a href="#" class="submenu-item" data-page="admin-sync">数据同步</a>
                    <a href="#" class="submenu-item" data-page="admin-logs">系统日志</a>
                    <a href="#" class="submenu-item" data-page="admin-backup">数据备份</a>
                </div>
            </div>
            
            <button class="toggle-sidebar">
                <i class="fas fa-chevron-left"></i>
            </button>
        </div>
        
        <!-- 主内容区域 -->
        <div class="main-content">
            <header>
                <div class="header-content">
                    <div></div> <!-- 空div用于占位 -->
                    <div class="user-info">
                        <div class="avatar">张</div>
                        <span>张三 (备案部门用户)</span>
                    </div>
                </div>
            </header>
            
            <main>
                <!-- 首页内容 -->
                <div id="index" class="page-content active">
                    <div class="page-header">
                        <h2>系统概览</h2>
                        <p>欢迎使用可信电子凭证查询平台，您可以进行单凭证查验或批量查验操作</p>
                    </div>
                    
                    <div class="stats-container">
                        <div class="stat-card">
                            <div class="stat-value">1,254</div>
                            <div class="stat-label">今日查询次数</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-value">98.7%</div>
                            <div class="stat-label">查询成功率</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-value">23</div>
                            <div class="stat-label">待处理批量任务</div>
                        </div>
                        <div class="stat-card">
                            <div class="stat-value">99.94%</div>
                            <div class="stat-label">系统可用性</div>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-2">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">快速查询</h3>
                                </div>
                                <p>输入凭证唯一标识进行单凭证查验</p>
                                <div class="form-group">
                                    <label class="form-label">凭证唯一标识</label>
                                    <input type="text" class="form-control" placeholder="请输入凭证唯一标识">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">用户验证码</label>
                                    <input type="text" class="form-control" placeholder="请输入验证码">
                                </div>
                                <div class="form-group">
                                    <label class="form-label">短信验证码</label>
                                    <div class="verification-area">
                                        <div class="verification-input">
                                            <input type="text" class="form-control" placeholder="请输入短信验证码">
                                        </div>
                                        <button class="btn btn-outline send-sms-btn">发送验证码</button>
                                    </div>
                                </div>
                                <button class="btn btn-primary query-btn"><i class="fas fa-search"></i> 立即查询</button>
                            </div>
                        </div>
                        
                        <div class="col-2">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">批量查询</h3>
                                </div>
                                <p>上传凭证列表或按条件筛选进行批量查验</p>
                                <div class="form-group">
                                    <label class="form-label">选择查询方式</label>
                                    <select class="form-control">
                                        <option>上传凭证列表</option>
                                        <option>按学校代码筛选</option>
                                        <option>按凭证类型筛选</option>
                                        <option>按签发批次筛选</option>
                                    </select>
                                </div>
                                <div class="form-group">
                                    <label class="form-label">上传文件</label>
                                    <input type="file" class="form-control">
                                    <small>支持Excel、CSV格式，单次最多处理1000条记录</small>
                                </div>
                                <button class="btn btn-primary"><i class="fas fa-upload"></i> 提交批量任务</button>
                            </div>
                            
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">最近查询记录</h3>
                                    <a href="#" class="btn btn-outline nav-link" data-page="results-list">查看全部</a>
                                </div>
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>查询时间</th>
                                            <th>凭证标识</th>
                                            <th>状态</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>2023-10-25 14:23</td>
                                            <td>CRED20231025001</td>
                                            <td><span class="status-badge status-valid">有效</span></td>
                                        </tr>
                                        <tr>
                                            <td>2023-10-25 13:45</td>
                                            <td>CRED20231024005</td>
                                            <td><span class="status-badge status-invalid">无效</span></td>
                                        </tr>
                                        <tr>
                                            <td>2023-10-25 11:12</td>
                                            <td>CRED20231023012</td>
                                            <td><span class="status-badge status-valid">有效</span></td>
                                        </tr>
                                        <tr>
                                            <td>2023-10-25 09:34</td>
                                            <td>CRED20231022008</td>
                                            <td><span class="status-badge status-valid">有效</span></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 单凭证查询 - 基础查询 -->
                <div id="single-basic" class="page-content">
                    <div class="page-header">
                        <h2>单凭证查询 - 基础查询</h2>
                        <p>通过凭证唯一标识进行快速查询</p>
                    </div>
                    
                    <div class="row">
                        <div class="col-2">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">凭证信息输入</h3>
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label">凭证唯一标识</label>
                                    <input type="text" class="form-control" placeholder="请输入凭证唯一标识">
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label">用户验证码</label>
                                    <div class="verification-area">
                                        <div class="verification-input">
                                            <input type="text" class="form-control" placeholder="请输入验证码">
                                        </div>
                                        <button class="btn btn-outline refresh-captcha">
                                            <i class="fas fa-redo"></i> 刷新
                                        </button>
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label">短信验证码</label>
                                    <div class="verification-area">
                                        <div class="verification-input">
                                            <input type="text" class="form-control" placeholder="请输入短信验证码">
                                        </div>
                                        <button class="btn btn-outline send-sms-btn">发送验证码</button>
                                    </div>
                                    <small class="text-muted">24小时内同一设备/IP重复查询可免短信验证</small>
                                </div>
                                
                                <button class="btn btn-primary query-btn"><i class="fas fa-search"></i> 立即查询</button>
                            </div>
                        </div>
                        
                        <div class="col-2">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">查询结果</h3>
                                </div>
                                
                                <div class="query-result-placeholder">
                                    <div style="text-align: center; padding: 40px 20px; color: #5f6368;">
                                        <i class="fas fa-search" style="font-size: 48px; margin-bottom: 15px; opacity: 0.5;"></i>
                                        <p>请输入查询条件并点击"立即查询"查看结果</p>
                                    </div>
                                </div>
                                
                                <div class="query-result" style="display: none;">
                                    <div class="result-summary">
                                        <h4>查询结果</h4>
                                        <div class="status-badge status-valid" style="margin-bottom: 15px;">凭证有效</div>
                                    </div>
                                    
                                    <table class="table">
                                        <tr>
                                            <td width="30%"><strong>凭证唯一标识</strong></td>
                                            <td>CRED20231025001</td>
                                        </tr>
                                        <tr>
                                            <td><strong>CAMI码</strong></td>
                                            <td>CAMI20231025001A1B2C3</td>
                                        </tr>
                                        <tr>
                                            <td><strong>签发时间</strong></td>
                                            <td>2023-10-25 10:30:45</td>
                                        </tr>
                                        <tr>
                                            <td><strong>凭证状态</strong></td>
                                            <td><span class="status-badge status-valid">有效</span></td>
                                        </tr>
                                        <tr>
                                            <td><strong>学校代码</strong></td>
                                            <td>SCH1001</td>
                                        </tr>
                                    </table>
                                    
                                    <div class="card-footer" style="margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--border-color);">
                                        <button class="btn btn-outline"><i class="fas fa-print"></i> 打印</button>
                                        <button class="btn btn-primary"><i class="fas fa-download"></i> 导出PDF</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 单凭证查询 - 高级查询 -->
                <div id="single-advanced" class="page-content">
                    <div class="page-header">
                        <h2>单凭证查询 - 高级查询</h2>
                        <p>通过多条件组合进行精确查询</p>
                    </div>
                    
                    <div class="row">
                        <div class="col-2">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">高级查询条件</h3>
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label">学校代码</label>
                                    <input type="text" class="form-control" placeholder="请输入学校代码">
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label">CA证书编号</label>
                                    <input type="text" class="form-control" placeholder="请输入CA证书编号">
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label">签发时间范围</label>
                                    <div class="row">
                                        <div class="col-2">
                                            <input type="date" class="form-control" placeholder="开始日期">
                                        </div>
                                        <div class="col-2">
                                            <input type="date" class="form-control" placeholder="结束日期">
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label">凭证类型</label>
                                    <select class="form-control">
                                        <option value="">全部类型</option>
                                        <option value="degree">学历证书</option>
                                        <option value="certificate">职业资格证书</option>
                                        <option value="transcript">成绩单</option>
                                        <option value="other">其他</option>
                                    </select>
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label">用户验证码</label>
                                    <div class="verification-area">
                                        <div class="verification-input">
                                            <input type="text" class="form-control" placeholder="请输入验证码">
                                        </div>
                                        <button class="btn btn-outline refresh-captcha">
                                            <i class="fas fa-redo"></i> 刷新
                                        </button>
                                    </div>
                                </div>
                                
                                <button class="btn btn-primary query-btn"><i class="fas fa-search"></i> 立即查询</button>
                            </div>
                        </div>
                        
                        <div class="col-2">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">查询结果</h3>
                                </div>
                                
                                <div class="query-result-placeholder">
                                    <div style="text-align: center; padding: 40px 20px; color: #5f6368;">
                                        <i class="fas fa-search" style="font-size: 48px; margin-bottom: 15px; opacity: 0.5;"></i>
                                        <p>请输入查询条件并点击"立即查询"查看结果</p>
                                    </div>
                                </div>
                                
                                <div class="query-result" style="display: none;">
                                    <div class="result-summary">
                                        <h4>查询结果</h4>
                                        <p>找到 <strong>3</strong> 条匹配记录</p>
                                    </div>
                                    
                                    <table class="table">
                                        <thead>
                                            <tr>
                                                <th>凭证标识</th>
                                                <th>CAMI码</th>
                                                <th>签发时间</th>
                                                <th>状态</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td>CRED20231025001</td>
                                                <td>CAMI20231025001A1B2C3</td>
                                                <td>2023-10-25 10:30:45</td>
                                                <td><span class="status-badge status-valid">有效</span></td>
                                                <td>
                                                    <button class="btn btn-outline btn-sm"><i class="fas fa-eye"></i> 查看</button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>CRED20231024005</td>
                                                <td>CAMI20231024005X7Y8Z9</td>
                                                <td>2023-10-24 14:20:30</td>
                                                <td><span class="status-badge status-valid">有效</span></td>
                                                <td>
                                                    <button class="btn btn-outline btn-sm"><i class="fas fa-eye"></i> 查看</button>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>CRED20231023012</td>
                                                <td>CAMI20231023012P5Q6R7</td>
                                                <td>2023-10-23 09:15:20</td>
                                                <td><span class="status-badge status-invalid">无效</span></td>
                                                <td>
                                                    <button class="btn btn-outline btn-sm"><i class="fas fa-eye"></i> 查看</button>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 单凭证查询 - 查询历史 -->
                <div id="single-history" class="page-content">
                    <div class="page-header">
                        <h2>单凭证查询 - 查询历史</h2>
                        <p>查看单凭证查询的历史记录</p>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">查询历史记录</h3>
                            <div>
                                <button class="btn btn-outline"><i class="fas fa-download"></i> 导出Excel</button>
                            </div>
                        </div>
                        
                        <div class="card-body">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>查询时间</th>
                                        <th>凭证标识</th>
                                        <th>CAMI码</th>
                                        <th>签发时间</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>2023-10-25 14:23</td>
                                        <td>CRED20231025001</td>
                                        <td>CAMI20231025001A1B2C3</td>
                                        <td>2023-10-25 10:30:45</td>
                                        <td><span class="status-badge status-valid">有效</span></td>
                                        <td>
                                            <button class="btn btn-outline btn-sm"><i class="fas fa-eye"></i> 查看</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>2023-10-25 13:45</td>
                                        <td>CRED20231024005</td>
                                        <td>CAMI20231024005X7Y8Z9</td>
                                        <td>2023-10-24 14:20:30</td>
                                        <td><span class="status-badge status-invalid">无效</span></td>
                                        <td>
                                            <button class="btn btn-outline btn-sm"><i class="fas fa-eye"></i> 查看</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>2023-10-25 11:12</td>
                                        <td>CRED20231023012</td>
                                        <td>CAMI20231023012P5Q6R7</td>
                                        <td>2023-10-23 09:15:20</td>
                                        <td><span class="status-badge status-valid">有效</span></td>
                                        <td>
                                            <button class="btn btn-outline btn-sm"><i class="fas fa-eye"></i> 查看</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>2023-10-25 09:34</td>
                                        <td>CRED20231022008</td>
                                        <td>CAMI20231022008M3N4O5</td>
                                        <td>2023-10-22 16:45:10</td>
                                        <td><span class="status-badge status-valid">有效</span></td>
                                        <td>
                                            <button class="btn btn-outline btn-sm"><i class="fas fa-eye"></i> 查看</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            
                            <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 20px;">
                                <div>显示 1-4 条，共 128 条记录</div>
                                <div>
                                    <button class="btn btn-outline btn-sm">上一页</button>
                                    <button class="btn btn-outline btn-sm">下一页</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 批量查询 - 文件上传查询 -->
                <div id="batch-upload" class="page-content">
                    <div class="page-header">
                        <h2>批量查询 - 文件上传查询</h2>
                        <p>通过上传凭证列表文件进行批量查验</p>
                    </div>
                    
                    <div class="row">
                        <div class="col-2">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">文件上传</h3>
                                </div>
                                
                                <div class="file-upload-area">
                                    <i class="fas fa-cloud-upload-alt"></i>
                                    <h4>上传凭证列表文件</h4>
                                    <p>支持Excel、CSV格式，单次最多处理1000条记录</p>
                                    <input type="file" id="file-upload" style="display: none;">
                                    <button class="btn btn-primary" id="upload-trigger"><i class="fas fa-folder-open"></i> 选择文件</button>
                                </div>
                                
                                <div class="file-info" style="display: none;">
                                    <div class="form-group">
                                        <label class="form-label">已选择文件</label>
                                        <div class="selected-file">
                                            <i class="fas fa-file-excel" style="color: var(--success-color); margin-right: 10px;"></i>
                                            <span class="file-name">credentials_list_20231025.xlsx</span>
                                            <span class="file-size">(256 KB)</span>
                                        </div>
                                    </div>
                                    
                                    <div class="form-group">
                                        <label class="form-label">处理进度</label>
                                        <div class="progress-bar">
                                            <div class="progress" id="upload-progress"></div>
                                        </div>
                                        <div class="progress-text" style="text-align: center; font-size: 14px; color: #5f6368;">
                                            正在处理... <span id="progress-percent">0%</span>
                                        </div>
                                    </div>
                                </div>
                                
                                <button class="btn btn-primary" id="start-batch-query" style="width: 100%;"><i class="fas fa-play"></i> 开始批量查询</button>
                            </div>
                        </div>
                        
                        <div class="col-2">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">批量查询说明</h3>
                                </div>
                                <div class="card-body">
                                    <ul style="padding-left: 20px; color: #5f6368;">
                                        <li>单次批量查询最多支持1000条记录</li>
                                        <li>文件格式支持Excel(.xlsx, .xls)和CSV</li>
                                        <li>文件必须包含"凭证唯一标识"列</li>
                                        <li>处理时间取决于记录数量，通常1-5分钟</li>
                                        <li>查询结果保留30天，请及时导出</li>
                                    </ul>
                                </div>
                            </div>
                            
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">最近批量任务</h3>
                                    <button class="btn btn-outline"><i class="fas fa-sync"></i> 刷新</button>
                                </div>
                                
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>任务ID</th>
                                            <th>提交时间</th>
                                            <th>记录数</th>
                                            <th>状态</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>BATCH20231025001</td>
                                            <td>2023-10-25 14:30</td>
                                            <td>150</td>
                                            <td><span class="status-badge status-valid">已完成</span></td>
                                        </tr>
                                        <tr>
                                            <td>BATCH20231024003</td>
                                            <td>2023-10-24 16:45</td>
                                            <td>89</td>
                                            <td><span class="status-badge status-valid">已完成</span></td>
                                        </tr>
                                        <tr>
                                            <td>BATCH20231025002</td>
                                            <td>2023-10-25 15:20</td>
                                            <td>75</td>
                                            <td><span class="status-badge" style="background-color: #fff8e1; color: var(--warning-color);">处理中</span></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 批量查询 - 条件筛选查询 -->
                <div id="batch-filter" class="page-content">
                    <div class="page-header">
                        <h2>批量查询 - 条件筛选查询</h2>
                        <p>通过条件筛选进行批量凭证查验</p>
                    </div>
                    
                    <div class="row">
                        <div class="col-2">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">筛选条件</h3>
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label">学校代码</label>
                                    <input type="text" class="form-control" placeholder="请输入学校代码">
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label">凭证类型</label>
                                    <select class="form-control">
                                        <option value="">全部类型</option>
                                        <option value="degree">学历证书</option>
                                        <option value="certificate">职业资格证书</option>
                                        <option value="transcript">成绩单</option>
                                        <option value="other">其他</option>
                                    </select>
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label">签发批次</label>
                                    <input type="text" class="form-control" placeholder="请输入签发批次号">
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label">签发时间范围</label>
                                    <div class="row">
                                        <div class="col-2">
                                            <input type="date" class="form-control" placeholder="开始日期">
                                        </div>
                                        <div class="col-2">
                                            <input type="date" class="form-control" placeholder="结束日期">
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label">凭证状态</label>
                                    <select class="form-control">
                                        <option value="">全部状态</option>
                                        <option value="valid">有效</option>
                                        <option value="invalid">无效</option>
                                        <option value="expired">已过期</option>
                                    </select>
                                </div>
                                
                                <button class="btn btn-primary" style="width: 100%;"><i class="fas fa-search"></i> 开始筛选查询</button>
                            </div>
                        </div>
                        
                        <div class="col-2">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">预计结果</h3>
                                </div>
                                <div class="card-body">
                                    <div style="text-align: center; padding: 30px 20px; color: #5f6368;">
                                        <i class="fas fa-filter" style="font-size: 48px; margin-bottom: 15px; opacity: 0.5;"></i>
                                        <p>根据筛选条件，预计匹配 <strong>125</strong> 条凭证记录</p>
                                        <p>预计处理时间: <strong>2-3分钟</strong></p>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">筛选查询记录</h3>
                                </div>
                                
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>任务ID</th>
                                            <th>筛选条件</th>
                                            <th>记录数</th>
                                            <th>状态</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>FILTER20231025001</td>
                                            <td>学校代码: SCH1001</td>
                                            <td>89</td>
                                            <td><span class="status-badge status-valid">已完成</span></td>
                                        </tr>
                                        <tr>
                                            <td>FILTER20231024002</td>
                                            <td>凭证类型: 学历证书</td>
                                            <td>156</td>
                                            <td><span class="status-badge status-valid">已完成</span></td>
                                        </tr>
                                        <tr>
                                            <td>FILTER20231023003</td>
                                            <td>签发批次: BATCH202310</td>
                                            <td>203</td>
                                            <td><span class="status-badge status-valid">已完成</span></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 批量查询 - 批量任务管理 -->
                <div id="batch-tasks" class="page-content">
                    <div class="page-header">
                        <h2>批量查询 - 批量任务管理</h2>
                        <p>管理批量查询任务和查看处理结果</p>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">批量查询任务</h3>
                            <div>
                                <button class="btn btn-outline"><i class="fas fa-sync"></i> 刷新</button>
                            </div>
                        </div>
                        
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>任务ID</th>
                                    <th>提交时间</th>
                                    <th>记录数</th>
                                    <th>类型</th>
                                    <th>状态</th>
                                    <th>完成时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>BATCH20231025001</td>
                                    <td>2023-10-25 14:30</td>
                                    <td>150</td>
                                    <td>文件上传</td>
                                    <td><span class="status-badge status-valid">已完成</span></td>
                                    <td>2023-10-25 14:35</td>
                                    <td>
                                        <button class="btn btn-outline btn-sm"><i class="fas fa-download"></i> 导出</button>
                                        <button class="btn btn-outline btn-sm"><i class="fas fa-eye"></i> 详情</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>FILTER20231024002</td>
                                    <td>2023-10-24 16:45</td>
                                    <td>89</td>
                                    <td>条件筛选</td>
                                    <td><span class="status-badge status-valid">已完成</span></td>
                                    <td>2023-10-24 16:50</td>
                                    <td>
                                        <button class="btn btn-outline btn-sm"><i class="fas fa-download"></i> 导出</button>
                                        <button class="btn btn-outline btn-sm"><i class="fas fa-eye"></i> 详情</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>BATCH20231023005</td>
                                    <td>2023-10-23 09:12</td>
                                    <td>256</td>
                                    <td>文件上传</td>
                                    <td><span class="status-badge status-valid">已完成</span></td>
                                    <td>2023-10-23 09:20</td>
                                    <td>
                                        <button class="btn btn-outline btn-sm"><i class="fas fa-download"></i> 导出</button>
                                        <button class="btn btn-outline btn-sm"><i class="fas fa-eye"></i> 详情</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>BATCH20231025002</td>
                                    <td>2023-10-25 15:20</td>
                                    <td>75</td>
                                    <td>文件上传</td>
                                    <td><span class="status-badge" style="background-color: #fff8e1; color: var(--warning-color);">处理中</span></td>
                                    <td>-</td>
                                    <td>
                                        <button class="btn btn-outline btn-sm" disabled><i class="fas fa-clock"></i> 等待</button>
                                    </td>
                                </tr>
                                <tr>
                                    <td>FILTER20231025003</td>
                                    <td>2023-10-25 15:05</td>
                                    <td>120</td>
                                    <td>条件筛选</td>
                                    <td><span class="status-badge" style="background-color: #e3f2fd; color: var(--primary-color);">排队中</span></td>
                                    <td>-</td>
                                    <td>
                                        <button class="btn btn-outline btn-sm" disabled><i class="fas fa-clock"></i> 等待</button>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        
                        <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding: 0 15px;">
                            <div>显示 1-5 条，共 23 条记录</div>
                            <div>
                                <button class="btn btn-outline btn-sm">上一页</button>
                                <button class="btn btn-outline btn-sm">下一页</button>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 查询结果 - 结果列表 -->
                <div id="results-list" class="page-content">
                    <div class="page-header">
                        <h2>查询结果 - 结果列表</h2>
                        <p>查看所有查询记录和详细结果</p>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">查询记录</h3>
                            <div>
                                <button class="btn btn-outline"><i class="fas fa-download"></i> 导出Excel</button>
                                <button class="btn btn-outline"><i class="fas fa-file-pdf"></i> 导出PDF</button>
                            </div>
                        </div>
                        
                        <div class="card-body">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>查询时间</th>
                                        <th>查询类型</th>
                                        <th>凭证标识</th>
                                        <th>CAMI码</th>
                                        <th>签发时间</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>2023-10-25 14:23</td>
                                        <td>单凭证查询</td>
                                        <td>CRED20231025001</td>
                                        <td>CAMI20231025001A1B2C3</td>
                                        <td>2023-10-25 10:30:45</td>
                                        <td><span class="status-badge status-valid">有效</span></td>
                                        <td>
                                            <button class="btn btn-outline btn-sm"><i class="fas fa-eye"></i> 查看</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>2023-10-25 13:45</td>
                                        <td>单凭证查询</td>
                                        <td>CRED20231024005</td>
                                        <td>CAMI20231024005X7Y8Z9</td>
                                        <td>2023-10-24 14:20:30</td>
                                        <td><span class="status-badge status-invalid">无效</span></td>
                                        <td>
                                            <button class="btn btn-outline btn-sm"><i class="fas fa-eye"></i> 查看</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>2023-10-25 11:12</td>
                                        <td>批量查询</td>
                                        <td>BATCH20231025001</td>
                                        <td>-</td>
                                        <td>-</td>
                                        <td><span class="status-badge status-valid">已完成</span></td>
                                        <td>
                                            <button class="btn btn-outline btn-sm"><i class="fas fa-download"></i> 导出</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>2023-10-25 09:34</td>
                                        <td>单凭证查询</td>
                                        <td>CRED20231022008</td>
                                        <td>CAMI20231022008P5Q6R7</td>
                                        <td>2023-10-22 09:15:20</td>
                                        <td><span class="status-badge status-valid">有效</span></td>
                                        <td>
                                            <button class="btn btn-outline btn-sm"><i class="fas fa-eye"></i> 查看</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>2023-10-24 16:20</td>
                                        <td>批量查询</td>
                                        <td>BATCH20231024003</td>
                                        <td>-</td>
                                        <td>-</td>
                                        <td><span class="status-badge status-valid">已完成</span></td>
                                        <td>
                                            <button class="btn btn-outline btn-sm"><i class="fas fa-download"></i> 导出</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            
                            <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 20px;">
                                <div>显示 1-5 条，共 128 条记录</div>
                                <div>
                                    <button class="btn btn-outline btn-sm">上一页</button>
                                    <button class="btn btn-outline btn-sm">下一页</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 查询结果 - 结果导出 -->
                <div id="results-export" class="page-content">
                    <div class="page-header">
                        <h2>查询结果 - 结果导出</h2>
                        <p>导出查询结果为Excel或PDF格式</p>
                    </div>
                    
                    <div class="row">
                        <div class="col-2">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">导出设置</h3>
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label">导出范围</label>
                                    <select class="form-control">
                                        <option>全部查询结果</option>
                                        <option>最近一个月</option>
                                        <option>最近三个月</option>
                                        <option>自定义时间范围</option>
                                    </select>
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label">导出格式</label>
                                    <select class="form-control">
                                        <option>Excel (.xlsx)</option>
                                        <option>PDF (.pdf)</option>
                                        <option>CSV (.csv)</option>
                                    </select>
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label">包含字段</label>
                                    <div style="max-height: 200px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: 4px; padding: 10px;">
                                        <div>
                                            <input type="checkbox" id="field1" checked>
                                            <label for="field1">凭证唯一标识</label>
                                        </div>
                                        <div>
                                            <input type="checkbox" id="field2" checked>
                                            <label for="field2">CAMI码</label>
                                        </div>
                                        <div>
                                            <input type="checkbox" id="field3" checked>
                                            <label for="field3">签发时间</label>
                                        </div>
                                        <div>
                                            <input type="checkbox" id="field4" checked>
                                            <label for="field4">凭证状态</label>
                                        </div>
                                        <div>
                                            <input type="checkbox" id="field5">
                                            <label for="field5">学校代码</label>
                                        </div>
                                        <div>
                                            <input type="checkbox" id="field6">
                                            <label for="field6">CA证书编号</label>
                                        </div>
                                        <div>
                                            <input type="checkbox" id="field7">
                                            <label for="field7">查询时间</label>
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label">文件名称</label>
                                    <input type="text" class="form-control" placeholder="请输入导出文件名称" value="凭证查询结果_20231025">
                                </div>
                                
                                <button class="btn btn-primary" style="width: 100%;"><i class="fas fa-download"></i> 开始导出</button>
                            </div>
                        </div>
                        
                        <div class="col-2">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">导出历史</h3>
                                </div>
                                
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>导出时间</th>
                                            <th>文件名称</th>
                                            <th>格式</th>
                                            <th>记录数</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>2023-10-25 14:30</td>
                                            <td>凭证查询结果_20231025.xlsx</td>
                                            <td>Excel</td>
                                            <td>150</td>
                                            <td>
                                                <button class="btn btn-outline btn-sm"><i class="fas fa-download"></i> 下载</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>2023-10-24 16:45</td>
                                            <td>批量查询报告_20231024.pdf</td>
                                            <td>PDF</td>
                                            <td>89</td>
                                            <td>
                                                <button class="btn btn-outline btn-sm"><i class="fas fa-download"></i> 下载</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>2023-10-23 09:12</td>
                                            <td>凭证查验结果_20231023.csv</td>
                                            <td>CSV</td>
                                            <td>256</td>
                                            <td>
                                                <button class="btn btn-outline btn-sm"><i class="fas fa-download"></i> 下载</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">导出说明</h3>
                                </div>
                                <div class="card-body">
                                    <ul style="padding-left: 20px; color: #5f6368;">
                                        <li>导出的文件将包含查询结果的所有选定字段</li>
                                        <li>Excel格式支持数据筛选和排序</li>
                                        <li>PDF格式适合打印和归档</li>
                                        <li>导出的文件保留30天，请及时下载</li>
                                        <li>单次导出最多支持10,000条记录</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 查询结果 - 查验报告 -->
                <div id="results-reports" class="page-content">
                    <div class="page-header">
                        <h2>查询结果 - 查验报告</h2>
                        <p>生成和查看凭证查验统计报告</p>
                    </div>
                    
                    <div class="row">
                        <div class="col-2">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">报告统计</h3>
                                </div>
                                
                                <div class="stats-container">
                                    <div class="stat-card">
                                        <div class="stat-value">1,254</div>
                                        <div class="stat-label">总查询次数</div>
                                    </div>
                                    <div class="stat-card">
                                        <div class="stat-value">1,189</div>
                                        <div class="stat-label">有效凭证数</div>
                                    </div>
                                    <div class="stat-card">
                                        <div class="stat-value">65</div>
                                        <div class="stat-label">无效凭证数</div>
                                    </div>
                                    <div class="stat-card">
                                        <div class="stat-value">94.8%</div>
                                        <div class="stat-label">有效比例</div>
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label">报告时间范围</label>
                                    <div class="row">
                                        <div class="col-2">
                                            <input type="date" class="form-control" value="2023-10-01">
                                        </div>
                                        <div class="col-2">
                                            <input type="date" class="form-control" value="2023-10-25">
                                        </div>
                                    </div>
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label">报告类型</label>
                                    <select class="form-control">
                                        <option>概要统计报告</option>
                                        <option>详细分析报告</option>
                                        <option>合规性报告</option>
                                    </select>
                                </div>
                                
                                <button class="btn btn-primary" style="width: 100%;"><i class="fas fa-chart-bar"></i> 生成报告</button>
                            </div>
                        </div>
                        
                        <div class="col-2">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">报告预览</h3>
                                </div>
                                <div class="card-body">
                                    <div style="text-align: center; padding: 40px 20px; color: #5f6368;">
                                        <i class="fas fa-chart-pie" style="font-size: 48px; margin-bottom: 15px; opacity: 0.5;"></i>
                                        <p>选择报告参数并点击"生成报告"查看预览</p>
                                    </div>
                                    
                                    <div class="report-preview" style="display: none;">
                                        <h4>凭证查验统计报告</h4>
                                        <p>报告时间: 2023-10-01 至 2023-10-25</p>
                                        
                                        <div style="display: flex; margin: 20px 0;">
                                            <div style="flex: 1; text-align: center;">
                                                <div style="width: 120px; height: 120px; border-radius: 50%; background: conic-gradient(var(--success-color) 0% 85%, var(--danger-color) 85% 100%); margin: 0 auto;"></div>
                                                <p style="margin-top: 10px;">有效: 85% | 无效: 15%</p>
                                            </div>
                                            
                                            <div style="flex: 1; padding-left: 20px;">
                                                <p><strong>查询统计:</strong></p>
                                                <p>总查询次数: 1,254</p>
                                                <p>单凭证查询: 892</p>
                                                <p>批量查询: 362</p>
                                                <p>平均查询响应时间: 87ms</p>
                                            </div>
                                        </div>
                                        
                                        <div class="card-footer" style="margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--border-color);">
                                            <button class="btn btn-outline"><i class="fas fa-print"></i> 打印报告</button>
                                            <button class="btn btn-primary"><i class="fas fa-download"></i> 导出报告</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 系统管理 - 用户管理 -->
                <div id="admin-users" class="page-content">
                    <div class="page-header">
                        <h2>系统管理 - 用户管理</h2>
                        <p>管理系统用户账户和权限设置</p>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">用户列表</h3>
                            <div>
                                <button class="btn btn-primary"><i class="fas fa-plus"></i> 添加用户</button>
                            </div>
                        </div>
                        
                        <div class="card-body">
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>用户名</th>
                                        <th>角色</th>
                                        <th>部门</th>
                                        <th>最后登录</th>
                                        <th>状态</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>zhangsan</td>
                                        <td>备案部门用户</td>
                                        <td>教育部</td>
                                        <td>2023-10-25 14:23</td>
                                        <td><span class="status-badge status-valid">激活</span></td>
                                        <td>
                                            <button class="btn btn-outline btn-sm"><i class="fas fa-edit"></i> 编辑</button>
                                            <button class="btn btn-outline btn-sm"><i class="fas fa-key"></i> 重置密码</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>lisi</td>
                                        <td>第三方查询用户</td>
                                        <td>人社局</td>
                                        <td>2023-10-25 13:45</td>
                                        <td><span class="status-badge status-valid">激活</span></td>
                                        <td>
                                            <button class="btn btn-outline btn-sm"><i class="fas fa-edit"></i> 编辑</button>
                                            <button class="btn btn-outline btn-sm"><i class="fas fa-key"></i> 重置密码</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>wangwu</td>
                                        <td>系统管理员</td>
                                        <td>技术部</td>
                                        <td>2023-10-25 11:12</td>
                                        <td><span class="status-badge status-valid">激活</span></td>
                                        <td>
                                            <button class="btn btn-outline btn-sm"><i class="fas fa-edit"></i> 编辑</button>
                                            <button class="btn btn-outline btn-sm"><i class="fas fa-key"></i> 重置密码</button>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>zhaoliu</td>
                                        <td>备案部门用户</td>
                                        <td>教育厅</td>
                                        <td>2023-10-24 16:20</td>
                                        <td><span class="status-badge status-invalid">禁用</span></td>
                                        <td>
                                            <button class="btn btn-outline btn-sm"><i class="fas fa-edit"></i> 编辑</button>
                                            <button class="btn btn-outline btn-sm"><i class="fas fa-key"></i> 重置密码</button>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                            
                            <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 20px;">
                                <div>显示 1-4 条，共 42 条记录</div>
                                <div>
                                    <button class="btn btn-outline btn-sm">上一页</button>
                                    <button class="btn btn-outline btn-sm">下一页</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 系统管理 - 数据同步 -->
                <div id="admin-sync" class="page-content">
                    <div class="page-header">
                        <h2>系统管理 - 数据同步</h2>
                        <p>管理省级节点数据同步任务和状态</p>
                    </div>
                    
                    <div class="row">
                        <div class="col-2">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">数据同步任务</h3>
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label">同步节点</label>
                                    <select class="form-control">
                                        <option>全部节点</option>
                                        <option>北京市节点</option>
                                        <option>上海市节点</option>
                                        <option>广东省节点</option>
                                        <option>江苏省节点</option>
                                    </select>
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label">同步时间</label>
                                    <input type="datetime-local" class="form-control" value="2023-10-25T16:00">
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label">同步类型</label>
                                    <select class="form-control">
                                        <option>全量同步</option>
                                        <option>增量同步</option>
                                    </select>
                                </div>
                                
                                <button class="btn btn-primary" style="width: 100%;"><i class="fas fa-sync"></i> 立即同步</button>
                                
                                <div style="margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--border-color);">
                                    <h4>定时同步设置</h4>
                                    <div class="form-group">
                                        <label class="form-label">同步频率</label>
                                        <select class="form-control">
                                            <option>每日一次</option>
                                            <option>每6小时一次</option>
                                            <option>每2小时一次</option>
                                            <option>每小时一次</option>
                                        </select>
                                    </div>
                                    <button class="btn btn-outline" style="width: 100%;">保存设置</button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-2">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">同步状态</h3>
                                    <button class="btn btn-outline"><i class="fas fa-sync"></i> 刷新</button>
                                </div>
                                
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>节点</th>
                                            <th>最后同步时间</th>
                                            <th>记录数</th>
                                            <th>状态</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>北京市节点</td>
                                            <td>2023-10-25 15:30</td>
                                            <td>1,254</td>
                                            <td><span class="status-badge status-valid">成功</span></td>
                                            <td>
                                                <button class="btn btn-outline btn-sm"><i class="fas fa-eye"></i> 详情</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>上海市节点</td>
                                            <td>2023-10-25 15:28</td>
                                            <td>892</td>
                                            <td><span class="status-badge status-valid">成功</span></td>
                                            <td>
                                                <button class="btn btn-outline btn-sm"><i class="fas fa-eye"></i> 详情</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>广东省节点</td>
                                            <td>2023-10-25 15:25</td>
                                            <td>1,567</td>
                                            <td><span class="status-badge status-valid">成功</span></td>
                                            <td>
                                                <button class="btn btn-outline btn-sm"><i class="fas fa-eye"></i> 详情</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>江苏省节点</td>
                                            <td>2023-10-25 14:50</td>
                                            <td>1,043</td>
                                            <td><span class="status-badge status-invalid">失败</span></td>
                                            <td>
                                                <button class="btn btn-outline btn-sm"><i class="fas fa-redo"></i> 重试</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">同步统计</h3>
                                </div>
                                <div class="card-body">
                                    <div class="stats-container">
                                        <div class="stat-card">
                                            <div class="stat-value">4,756</div>
                                            <div class="stat-label">今日同步记录</div>
                                        </div>
                                        <div class="stat-card">
                                            <div class="stat-value">98.5%</div>
                                            <div class="stat-label">同步成功率</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 系统管理 - 系统日志 -->
                <div id="admin-logs" class="page-content">
                    <div class="page-header">
                        <h2>系统管理 - 系统日志</h2>
                        <p>查看系统操作日志和审计记录</p>
                    </div>
                    
                    <div class="card">
                        <div class="card-header">
                            <h3 class="card-title">系统日志</h3>
                            <div>
                                <button class="btn btn-outline"><i class="fas fa-download"></i> 导出日志</button>
                            </div>
                        </div>
                        
                        <div class="card-body">
                            <div class="row" style="margin-bottom: 20px;">
                                <div class="col-2">
                                    <div class="form-group">
                                        <label class="form-label">日志级别</label>
                                        <select class="form-control">
                                            <option>全部级别</option>
                                            <option>信息</option>
                                            <option>警告</option>
                                            <option>错误</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-2">
                                    <div class="form-group">
                                        <label class="form-label">时间范围</label>
                                        <select class="form-control">
                                            <option>最近24小时</option>
                                            <option>最近7天</option>
                                            <option>最近30天</option>
                                            <option>自定义范围</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            
                            <table class="table">
                                <thead>
                                    <tr>
                                        <th>时间</th>
                                        <th>级别</th>
                                        <th>用户</th>
                                        <th>操作</th>
                                        <th>详情</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>2023-10-25 14:23:45</td>
                                        <td><span class="status-badge" style="background-color: #e3f2fd; color: var(--primary-color);">信息</span></td>
                                        <td>zhangsan</td>
                                        <td>单凭证查询</td>
                                        <td>查询凭证: CRED20231025001</td>
                                    </tr>
                                    <tr>
                                        <td>2023-10-25 13:45:12</td>
                                        <td><span class="status-badge" style="background-color: #fff8e1; color: var(--warning-color);">警告</span></td>
                                        <td>lisi</td>
                                        <td>批量查询</td>
                                        <td>文件格式验证警告</td>
                                    </tr>
                                    <tr>
                                        <td>2023-10-25 11:12:33</td>
                                        <td><span class="status-badge status-valid">信息</span></td>
                                        <td>wangwu</td>
                                        <td>数据同步</td>
                                        <td>北京市节点同步完成</td>
                                    </tr>
                                    <tr>
                                        <td>2023-10-25 09:34:56</td>
                                        <td><span class="status-badge status-invalid">错误</span></td>
                                        <td>system</td>
                                        <td>系统错误</td>
                                        <td>数据库连接超时</td>
                                    </tr>
                                    <tr>
                                        <td>2023-10-24 16:20:18</td>
                                        <td><span class="status-badge status-valid">信息</span></td>
                                        <td>zhangsan</td>
                                        <td>用户登录</td>
                                        <td>用户登录成功</td>
                                    </tr>
                                </tbody>
                            </table>
                            
                            <div style="display: flex; justify-content: space-between; align-items: center; margin-top: 20px;">
                                <div>显示 1-5 条，共 1,284 条记录</div>
                                <div>
                                    <button class="btn btn-outline btn-sm">上一页</button>
                                    <button class="btn btn-outline btn-sm">下一页</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 系统管理 - 数据备份 -->
                <div id="admin-backup" class="page-content">
                    <div class="page-header">
                        <h2>系统管理 - 数据备份</h2>
                        <p>管理系统数据备份和恢复</p>
                    </div>
                    
                    <div class="row">
                        <div class="col-2">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">备份设置</h3>
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label">备份频率</label>
                                    <select class="form-control">
                                        <option>每日一次</option>
                                        <option>每周一次</option>
                                        <option>每月一次</option>
                                    </select>
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label">备份时间</label>
                                    <input type="time" class="form-control" value="02:00">
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label">保留时间</label>
                                    <select class="form-control">
                                        <option>7天</option>
                                        <option>15天</option>
                                        <option selected>30天</option>
                                        <option>90天</option>
                                    </select>
                                </div>
                                
                                <div class="form-group">
                                    <label class="form-label">备份类型</label>
                                    <select class="form-control">
                                        <option>全量备份</option>
                                        <option>增量备份</option>
                                    </select>
                                </div>
                                
                                <button class="btn btn-primary" style="width: 100%;"><i class="fas fa-save"></i> 保存设置</button>
                                
                                <div style="margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--border-color);">
                                    <h4>立即备份</h4>
                                    <button class="btn btn-outline" style="width: 100%; margin-bottom: 10px;"><i class="fas fa-database"></i> 执行全量备份</button>
                                    <button class="btn btn-outline" style="width: 100%;"><i class="fas fa-plus"></i> 执行增量备份</button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-2">
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">备份记录</h3>
                                    <button class="btn btn-outline"><i class="fas fa-sync"></i> 刷新</button>
                                </div>
                                
                                <table class="table">
                                    <thead>
                                        <tr>
                                            <th>备份时间</th>
                                            <th>类型</th>
                                            <th>大小</th>
                                            <th>状态</th>
                                            <th>操作</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>2023-10-25 02:00</td>
                                            <td>全量备份</td>
                                            <td>2.3 GB</td>
                                            <td><span class="status-badge status-valid">成功</span></td>
                                            <td>
                                                <button class="btn btn-outline btn-sm"><i class="fas fa-download"></i> 下载</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>2023-10-24 02:00</td>
                                            <td>全量备份</td>
                                            <td>2.2 GB</td>
                                            <td><span class="status-badge status-valid">成功</span></td>
                                            <td>
                                                <button class="btn btn-outline btn-sm"><i class="fas fa-download"></i> 下载</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>2023-10-23 02:00</td>
                                            <td>全量备份</td>
                                            <td>2.1 GB</td>
                                            <td><span class="status-badge status-valid">成功</span></td>
                                            <td>
                                                <button class="btn btn-outline btn-sm"><i class="fas fa-download"></i> 下载</button>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>2023-10-22 02:00</td>
                                            <td>全量备份</td>
                                            <td>2.1 GB</td>
                                            <td><span class="status-badge status-invalid">失败</span></td>
                                            <td>
                                                <button class="btn btn-outline btn-sm"><i class="fas fa-redo"></i> 重试</button>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                            
                            <div class="card">
                                <div class="card-header">
                                    <h3 class="card-title">备份统计</h3>
                                </div>
                                <div class="card-body">
                                    <div class="stats-container">
                                        <div class="stat-card">
                                            <div class="stat-value">156</div>
                                            <div class="stat-label">总备份次数</div>
                                        </div>
                                        <div class="stat-card">
                                            <div class="stat-value">98.7%</div>
                                            <div class="stat-label">备份成功率</div>
                                        </div>
                                        <div class="stat-card">
                                            <div class="stat-value">328 GB</div>
                                            <div class="stat-label">总备份容量</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
            
            <footer>
                <p>© 2023 可信电子凭证查询平台 | 安全合规 | 高效查验</p>
            </footer>
        </div>
    </div>

    <script>
        // 侧边栏菜单交互
        document.addEventListener('DOMContentLoaded', function() {
            // 侧边栏折叠/展开
            const toggleSidebar = document.querySelector('.toggle-sidebar');
            const sidebar = document.querySelector('.sidebar');
            const mainContent = document.querySelector('.main-content');
            
            toggleSidebar.addEventListener('click', function() {
                sidebar.classList.toggle('collapsed');
                mainContent.classList.toggle('expanded');
                
                const icon = this.querySelector('i');
                if (sidebar.classList.contains('collapsed')) {
                    icon.className = 'fas fa-chevron-right';
                } else {
                    icon.className = 'fas fa-chevron-left';
                }
            });
            
            // 主菜单点击事件
            const menuItems = document.querySelectorAll('.menu-item');
            menuItems.forEach(item => {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 移除所有active类
                    menuItems.forEach(i => i.classList.remove('active'));
                    // 添加当前active类
                    this.classList.add('active');
                    
                    // 切换子菜单显示
                    const submenu = this.nextElementSibling;
                    if (submenu && submenu.classList.contains('submenu')) {
                        // 关闭其他子菜单
                        document.querySelectorAll('.submenu').forEach(s => {
                            if (s !== submenu) s.classList.remove('active');
                        });
                        // 切换当前子菜单
                        submenu.classList.toggle('active');
                    }
                    
                    // 显示对应的页面内容
                    const pageId = this.getAttribute('data-page');
                    if (pageId) {
                        showPage(pageId);
                    }
                });
            });
            
            // 子菜单点击事件
            const submenuItems = document.querySelectorAll('.submenu-item');
            submenuItems.forEach(item => {
                item.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    // 移除同级active类
                    const siblings = this.parentElement.querySelectorAll('.submenu-item');
                    siblings.forEach(i => i.classList.remove('active'));
                    // 添加当前active类
                    this.classList.add('active');
                    
                    // 显示对应的页面内容
                    const pageId = this.getAttribute('data-page');
                    if (pageId) {
                        showPage(pageId);
                    }
                });
            });
            
            // 显示页面函数
            function showPage(pageId) {
                // 隐藏所有页面
                document.querySelectorAll('.page-content').forEach(page => {
                    page.classList.remove('active');
                });
                
                // 显示目标页面
                const targetPage = document.getElementById(pageId);
                if (targetPage) {
                    targetPage.classList.add('active');
                }
            }
            
            // 模拟发送验证码功能
            const sendCodeBtns = document.querySelectorAll('.send-sms-btn');
            sendCodeBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const originalText = this.textContent;
                    this.textContent = '发送中...';
                    this.disabled = true;
                    
                    setTimeout(() => {
                        this.textContent = '已发送';
                        setTimeout(() => {
                            this.textContent = originalText;
                            this.disabled = false;
                        }, 3000);
                    }, 1000);
                });
            });
            
            // 查询按钮点击事件
            const queryBtns = document.querySelectorAll('.query-btn');
            queryBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    const placeholder = this.closest('.card').querySelector('.query-result-placeholder');
                    const result = this.closest('.card').querySelector('.query-result');
                    
                    if (placeholder && result) {
                        placeholder.style.display = 'none';
                        result.style.display = 'block';
                    }
                });
            });
            
            // 文件上传模拟
            const uploadTrigger = document.getElementById('upload-trigger');
            const fileUpload = document.getElementById('file-upload');
            const fileInfo = document.querySelector('.file-info');
            const startBatchQuery = document.getElementById('start-batch-query');
            
            if (uploadTrigger && fileUpload) {
                uploadTrigger.addEventListener('click', function() {
                    fileUpload.click();
                });
                
                fileUpload.addEventListener('change', function() {
                    if (this.files.length > 0) {
                        fileInfo.style.display = 'block';
                    }
                });
            }
            
            if (startBatchQuery) {
                startBatchQuery.addEventListener('click', function() {
                    const progress = document.getElementById('upload-progress');
                    const progressPercent = document.getElementById('progress-percent');
                    
                    let width = 0;
                    const interval = setInterval(() => {
                        if (width >= 100) {
                            clearInterval(interval);
                        } else {
                            width++;
                            progress.style.width = width + '%';
                            progressPercent.textContent = width + '%';
                        }
                    }, 50);
                });
            }
            
            // 标签页切换
            const tabs = document.querySelectorAll('.tab');
            tabs.forEach(tab => {
                tab.addEventListener('click', function() {
                    const tabId = this.getAttribute('data-tab');
                    const parent = this.closest('.card');
                    
                    // 更新标签激活状态
                    parent.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
                    this.classList.add('active');
                    
                    // 显示对应内容
                    parent.querySelectorAll('.tab-content').forEach(content => {
                        content.classList.remove('active');
                    });
                    parent.querySelector(`#${tabId}-tab`).classList.add('active');
                });
            });
        });
    </script>
</body>
</html>